<template>
	<div class='table-content'>
		<div class="search">
			<slot name="search">
				<el-input v-model="searchKey" style="width: 240px" placeholder="请输入关键词" :suffix-icon="Search" />
			</slot>
			<div>
				<el-button type="success">添加</el-button>
				<el-button type="danger">批量删除</el-button>
			</div>
		</div>
		<el-table header-row-class-name="custom-th" :data="tableData" stripe @selection-change="onSelectionChange">
			<el-table-column v-for="item in columnCom" v-bind="item" :key="item.prop">
				<template #default="scope" v-if="item.prop === 'action'">
					<el-space>
						<el-link type="primary" @click="onDetails(scope.row)">详情</el-link>
						<el-link type="primary" @click="onEdit(scope.row)">编辑</el-link>
						<el-link type="danger" @click="onDelete(scope.row)">删除</el-link>
					</el-space>
				</template>
				<!-- <template #default="scope" v-if="item.custom">
					<div v-html="item.render(scope)"></div>
				</template> -->
			</el-table-column>
		</el-table>
		<div class="pager">
			<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :total="total" background
				layout="total, sizes, prev, pager, next, jumper" @change="onChangePage" />
		</div>
	</div>
</template>

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue';
import { computed, ref } from 'vue';

interface Props {
	total: number;
	column: Array<any>;
	tableData: Array<any>;
	paginationProps?: object;
}
const emits = defineEmits(['selection-change', 'change-page'])
const props = withDefaults(defineProps<Props>(), {
	total: 100,
	column: () => [],
	tableData: () => [],
	paginationProps: () => ({})
})

const searchKey = ref('');
const currentPage = ref(1);
const pageSize = ref(20);
const columnCom = computed(() => [
	{
		fixed: "left",
		type: 'selection',
		prop: 'selection',
		label: 'id',
		width: '55'
	},
	...props.column,
	{
		fixed: "right",
		prop: 'action',
		label: '操作',
		width: '140'
	},
])

const onSelectionChange = (val: any[]) => {
	emits('selection-change', val)
}
const onChangePage = (cuurentPage: number, pageSize: number) => {
	emits('change-page', cuurentPage, pageSize)
}
const onDetails = (row: any) => {
	console.log(`output->row`, row)
}
const onEdit = (row: any) => {
	console.log(`output->row`, row)
}
const onDelete = (row: any) => {
	console.log(row)
}
</script>
<style lang='scss' scoped>
.table-content {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;

	.search {
		margin-bottom: 12px;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	:deep(.el-table) {
		flex: 1;
		overflow: hidden;
	}

	:deep(.custom-th) {
		th.el-table__cell {
			background-color: var(--grey-100);
		}
	}

	.pager {
		margin-top: 12px;
		width: 100%;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
}
</style>
